import { defineComponent } from 'vue';
import $style from './index.module.scss';
import MenuBarMod from './modules/menu-bar';
import ControllerBarMod from './modules/controller-bar';
import InformationPaneMod from './modules/information-pane';
import NavigationPaneMod from './modules/navigation-pane';
import WorkspaceMod from './modules/workspace';
import WorkspaceHeaderMod from './modules/workspace-header';
import BottomSideMod from './modules/bottom-side';
import DoubleColumnsResizeComp from '@/components/double-columns-resize';
import { useLayoutStore } from '@/store';

export default defineComponent({
    setup() {
        /**
         * @description 布局相关的 store
         * @type { object }
         */
        const layoutStore = useLayoutStore();

        const handleOuterDragEnd = ({ firstSize, secondSize }) => {
            console.log('outer', { firstSize, secondSize });
            layoutStore.rightSize = secondSize
        };

        const handleInnerDragEnd = ({ firstSize, secondSize }) => {
            console.log('inner', { firstSize, secondSize });
            layoutStore.leftSize = firstSize
        };

        return () => (<div class={$style.editorContainer}>
            <MenuBarMod class={$style.menuBarContainer} />
            <ControllerBarMod class={$style.controllerBarContainer} />
            <DoubleColumnsResizeComp
                class={$style.mainContainer}
                firstMinSize={500}
                secondSize={layoutStore.rightSize}
                onDragEnd={handleOuterDragEnd}>
                {{
                    first: () => <DoubleColumnsResizeComp
                        firstSize={layoutStore.leftSize}
                        secondMinSize={300}
                        onDragEnd={handleInnerDragEnd}>{{
                            first: () => <NavigationPaneMod class={$style.workspaceContainer} />,
                            second: () => <>
                                <WorkspaceHeaderMod class={$style.workspaceHeaderContainer} />
                                <WorkspaceMod class={$style.workspaceContainer} />
                            </>
                        }}</DoubleColumnsResizeComp>,
                    second: () => <InformationPaneMod />
                }}
            </DoubleColumnsResizeComp>
            <BottomSideMod class={$style.bottomSideContainer} />
        </div>)
    }
})